<template>
	<view class="search">
		<view class="search_inner" @click="toSearch">
			<image src="../static/image/searchIcon.png" mode=""></image>	
			<view :style="{color:searchResult? '#0C2351' : ''}">{{searchResult || "搜索"}}</view>
		</view>
		<view class="search_cancel">
			<slot>
		
			</slot>
			
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	searchResult:{
		type:String,
		default:""
	}
})
// 前往搜索页面
const toSearch = ()=>{
	uni.navigateTo({
		url:`/pages/search/search?searchResult=${props.searchResult}`
	})
}
</script>

<style lang="less" scoped>
	.search{
		display: flex;
		align-items: center;
		.search_inner{
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 38px;
			border: 2px solid #FFFFFF;
			flex-grow: 1;
			display: flex;
			align-items: center;
			padding: 0 26rpx;
			white-space: nowrap; /* 不换行 */
			overflow: hidden; /* 隐藏超出部分 */
			text-overflow: ellipsis; /* 显示省略号 */
			border: 1rpx solid #ccc; /* 可选：添加边框以便观察效果 */
			>image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 24rpx;
			}
			view{
				font-weight: 400;
				font-size: 28rpx;
				color: #CCCCCC;
			
			}
		}
		.search_cancel{
			font-weight: 500;
			font-size: 28px;
			color: #333333;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			padding-left: 32rpx;
		}

	}
	@media screen and (min-width: 768px){
		.search{
			width: 40%;
			.search_inner{
				height: 100rpx;
				image{
					width: 60rpx;
					height: 60rpx;
				}
				view{
					flex-grow: 1;
					font-size: 45rpx;
					 white-space: nowrap; /* 不换行 */
					  overflow: hidden; /* 隐藏超出部分 */
					  text-overflow: ellipsis; /* 显示省略号 */
				}
			}
			
			.search_cancel{
				font-size: 45rpx;
				width: 160rpx;
			}
		}
	}

</style>